<template>
  <el-container class="home-container">
    <!-- 页面头部 -->
    <el-header class="header-section" height="220px">
      <el-container class="container">
        <el-main>
          <el-row justify="center">
            <el-col :span="24">
              <el-text class="main-title" size="large" tag="strong">
                <el-icon class="title-icon"><Star /></el-icon>
                高质量文案生成器
                <el-icon class="title-icon"><Star /></el-icon>
              </el-text>
            </el-col>
            <el-col :span="24">
              <el-text class="subtitle" size="small" type="secondary">
                用AI创作有文化内涵的精美文案 · 让每一句话都有温度
              </el-text>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </el-header>

    <!-- 主要内容区域 -->
    <el-main class="main-content">
      <el-container class="container">
        <el-row :gutter="32">
          <!-- 左侧：参数设置 -->
          <el-col :lg="10" :md="12" :sm="24">
            <el-card class="setting-card" shadow="hover">
              <template #header>
                <el-row align="middle">
                  <el-col>
                    <el-icon><Setting /></el-icon>
                    <span>创作设置</span>
                  </el-col>
                </el-row>
              </template>

              <el-form :model="formData" label-position="top" size="large">
                <el-form-item label="文案类型">
                  <el-select v-model="formData.content_type" placeholder="选择您的分享场景" style="width: 100%">
                    <el-option
                      v-for="type in contentTypes"
                      :key="type.value"
                      :label="type.label"
                      :value="type.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="文案风格">
                  <el-select v-model="formData.style" placeholder="选择您希望的表达风格" style="width: 100%">
                    <el-option
                      v-for="style in contentStyles"
                      :key="style.value"
                      :label="style.label"
                      :value="style.value"
                    />
                  </el-select>
                </el-form-item>

                <el-form-item label="自定义关键词（可选）">
                  <el-input
                    v-model="keywordsInput"
                    placeholder="请输入关键词，多个词用逗号分隔"
                    clearable
                  />
                  <el-text class="form-tip" size="small" type="info">
                    💡 例如：阳光,咖啡,温暖 - 让AI更好地理解您的需求
                  </el-text>
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    size="large"
                    @click="handleGenerate"
                    :loading="isLoading"
                    :disabled="!formData.content_type || !formData.style"
                    style="width: 100%"
                  >
                    <el-icon v-if="!isLoading"><Star /></el-icon>
                    {{ isLoading ? 'AI正在创作中...' : '开始创作' }}
                  </el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>

          <!-- 右侧：生成结果 -->
          <el-col :lg="14" :md="12" :sm="24">
            <el-card class="result-card" shadow="hover">
              <template #header>
                <el-row justify="space-between" align="middle">
                  <el-col>
                    <el-icon><Document /></el-icon>
                    <span>创作结果</span>
                  </el-col>
                  <el-col>
                    <el-tag v-if="copywritings.length > 0" type="info" size="small">
                      {{ copywritings.length }}条精选文案
                    </el-tag>
                  </el-col>
                </el-row>
              </template>

              <el-main v-if="copywritings.length === 0" class="empty-state">
                <el-empty description="等待您的创作">
                  <template #image>
                    <el-icon size="60" color="#d0d7de"><EditPen /></el-icon>
                  </template>
                  <template #description>
                    <p>选择文案类型和风格，让AI为您创作精美文案</p>
                  </template>
                </el-empty>
              </el-main>

              <el-main v-else class="copywriting-list">
                <transition-group name="fade-slide" tag="div">
                  <el-card
                    v-for="(item, index) in copywritings"
                    :key="`${item.created_at}-${index}`"
                    class="copywriting-item"
                    shadow="hover"
                  >
                    <el-row class="copywriting-content">
                      <el-col :span="24">
                        <el-text class="copywriting-text" size="small">{{ item.content }}</el-text>
                      </el-col>
                      <el-col :span="24" class="copywriting-meta">
                        <el-space :size="8">
                          <el-tag size="small" type="primary">{{ getTypeLabel(item.content_type) }}</el-tag>
                          <el-tag size="small" type="success">{{ getStyleLabel(item.style) }}</el-tag>
                        </el-space>
                      </el-col>
                    </el-row>
                    <el-row class="copywriting-actions">
                      <el-col :span="24" style="text-align: right;">
                        <el-button
                          type="primary"
                          size="small"
                          @click="copyToClipboard(item.content, index)"
                          :icon="copiedIndex === index ? 'Check' : 'CopyDocument'"
                        >
                          {{ copiedIndex === index ? '已复制' : '复制' }}
                        </el-button>
                      </el-col>
                    </el-row>
                  </el-card>
                </transition-group>
              </el-main>
            </el-card>
          </el-col>
        </el-row>
      </el-container>
    </el-main>
    <el-footer class="footer-section">
      <el-text> 文案内容均为AI生成 AI也会犯错 请仔细甄别</el-text>
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Star, 
  Setting, 
  Document, 
  EditPen, 
  CopyDocument
} from '@element-plus/icons-vue'
import { useCopywritingStore } from '@/store/modules/copywriting'
import { storeToRefs } from 'pinia'

const copywritingStore = useCopywritingStore()
const { isLoading, copywritings, contentTypes, contentStyles } = storeToRefs(copywritingStore)

const formData = reactive({
  content_type: '',
  style: '',
  keywords: [] as string[],
})

const keywordsInput = ref('')
const copiedIndex = ref(-1)

// 初始化数据
onMounted(async () => {
  await copywritingStore.fetchContentTypes()
  await copywritingStore.fetchContentStyles()
})

// 生成文案
const handleGenerate = async () => {
  if (!formData.content_type || !formData.style) {
    ElMessage.warning('请选择文案类型和风格')
    return
  }

  const keywords = keywordsInput.value
    ? keywordsInput.value.split(',').map(k => k.trim()).filter(k => k)
    : []

  try {
    await copywritingStore.generateCopywriting({
      ...formData,
      keywords
    })
    ElMessage.success('AI文案创作完成！')
  } catch (error) {
    ElMessage.error('文案生成失败，请检查网络或稍后重试')
  }
}

// 复制到剪贴板
const copyToClipboard = async (text: string, index: number) => {
  try {
    await navigator.clipboard.writeText(text)
    copiedIndex.value = index
    ElMessage.success('复制成功！')
    
    setTimeout(() => {
      copiedIndex.value = -1
    }, 2000)
  } catch (error) {
    ElMessage.error('复制失败，请手动复制')
  }
}

// 获取类型标签
const getTypeLabel = (type: string) => {
  const typeObj = contentTypes.value.find(t => t.value === type)
  return typeObj?.label || type
}

// 获取风格标签
const getStyleLabel = (style: string) => {
  const styleObj = contentStyles.value.find(s => s.value === style)
  return styleObj?.label || style
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 页面头部 */
.header-section {
  padding: 60px 20px 40px;
  text-align: center;
  color: #303133;
  background-color: white;
}
.footer-section {
  padding: 0; /* ✅ 关键！移除 Element UI 默认 padding */
  text-align: center;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.main-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.title-icon {
  color: #409EFF;
  animation: sparkle 2s infinite ease-in-out alternate;
}

@keyframes sparkle {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.2) rotate(10deg);
    opacity: 1;
  }
}

.subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  display: block;
  margin-top: 16px;
}

/* 主要内容区域 */
.main-content {
  padding: 40px 20px 60px;
  background-color: #f5f7fa;
}

/* 卡片样式 */
.setting-card,
.result-card {
  border-radius: 16px;
  border: 1px solid #e4e7ed;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

:deep(.el-card__header) {
  background-color: #fafafa;
  border-bottom: 1px solid #e4e7ed;
  padding: 20px;
}

/* 表单样式 */
.form-tip {
  display: block;
  font-size: 0.85rem;
  margin-top: 8px;
  padding: 8px 12px;
  background: #ecf5ff;
  border-radius: 8px;
  border-left: 3px solid #409EFF;
}

/* 文案列表 */
.copywriting-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.copywriting-item {
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s ease;
}

.copywriting-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
}

.copywriting-content {
  margin-bottom: 12px;
}

.copywriting-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #303133;
  display: block;
  margin-bottom: 12px;
}

.copywriting-meta {
  margin-bottom: 8px;
}

.copywriting-actions {
  display: flex;
  justify-content: flex-end;
}

/* 动画 */
.fade-slide-enter-active {
  transition: all 0.6s ease;
}

.fade-slide-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.fade-slide-enter-to {
  opacity: 1;
  transform: translateY(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-title {
    font-size: 2.2rem;
    flex-direction: column;
    gap: 8px;
  }
  
  .header-section {
    padding: 40px 20px 30px;
  }
  
  .main-content {
    padding: 30px 15px 40px;
  }
}

@media (max-width: 480px) {
  .main-title {
    font-size: 1.8rem;
  }
  
  .subtitle {
    font-size: 1rem;
  }
}
</style>